<template>
  <div id="app">
    <!-- <img src="./assets/logo.png" width="100"> -->
    <v-header></v-header>
    <div class="guest-book">
      <div class="guest-form">
        <form id="submit-form" @submit.prevent="addMsg">
          <div class="clearfix form-group">
            <label for="user-name" class="left">您的大名：</label>
            <div class="right">
              <input type="text" name="userName" v-model="user.uname" placeholder="留下姓名" required>
            </div>
          </div>
          <div class="clearfix form-group">
            <label for="user-message" class="left">您的高论：</label>
            <div class="right" id="textarea1">
              <textarea name="userMessage" v-model="user.content" rows="3" placeholder="别说你不知道写什么。。。" required></textarea>
            </div>
          </div>
          <div class="clearfix form-group"><button type="submit">走一个</button></div>
        </form>
      </div>
      <router-view @deleteUp="onDelete" @editUp="onEdit" :messages="messages"></router-view>
    </div>
    <div class="modify-popup" v-show="isEdit">
      <div class="shade" @click="closePopup"></div>
      <form id="modify-form" @submit.prevent="editMsg">
        <div class="clearfix form-group">
          <label for="user-name" class="left">您的大名：</label>
          <div class="right">
            <input type="text" name="userName" v-model="edit.uname" placeholder="留下姓名" required>
          </div>
        </div>
        <div class="clearfix form-group">
          <label for="user-message" class="left">您的高论：</label>
          <div class="right" id="textarea2">
            <textarea name="userMessage" v-model="edit.content" rows="3" placeholder="别说你不知道写什么。。。" required></textarea>
          </div>
        </div>
        <input type="hidden" v-model="edit.index">
        <div class="clearfix form-group"><button type="submit">走一个</button></div>
      </form>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script type="text/ecmascript-6">

  import Vue from 'vue'
  import vHeader from '@/components/header/header'
  import vFooter from '@/components/footer/footer'
  const ERR_OK = 0;

  export default {
    // name: 'app'
    data () {
      return {
        messages: [],
        user: {
          uname: '',
          content: ''
        },
        edit: {
          index: 0,
          uname: '',
          content: ''
        },
        isEdit: false
      }
    },
    created() {
      this.$http.get('/api/messages').then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          // this.messages = Object.assign({}, this.messages, response.data);// 拷贝一个新对象
          this.messages = response.data.slice().reverse(); // 拷贝一个新数组 （并反转）
        }
      });
    },
    components: {
      'v-header': vHeader,
      'v-footer': vFooter
    },
    methods: {
      addMsg() {
        this.messages.unshift({"uname": this.user.uname, "time": "2017-8-10", "content": this.user.content});
        this.user.uname = '';
        this.user.content = '';
      },
      onDelete(index) {
        this.messages.splice(index, 1);
      },
      onEdit(index) {
        this.edit.uname = this.messages[index].uname;
        this.edit.content = this.messages[index].content;
        this.edit.index = index;
        this.isEdit = true;
      },
      editMsg() {
        // this.messages[this.edit.index] = {"uname": this.edit.uname, "time": "2017-8-10", "content": this.edit.content}; // 不会出发dom绑定数据改变
        // this.messages.splice(this.edit.index, 1, {"uname": this.edit.uname, "time": "2017-8-10", "content": this.edit.content}); // 可以
        Vue.set(this.messages, this.edit.index, {"uname": this.edit.uname, "time": "2017-8-10", "content": this.edit.content});
        this.edit.uname = '';
        this.edit.content = '';
        this.edit.index = 0;
        this.closePopup();
      },
      closePopup() {
        this.isEdit = false;
      }
    }
  }

</script>